<template>
  <div class="htmleaf-container">
		<div class="htmleaf-content bgcolor-8">
			<div id="wrapper">
				<div class="mobile">
					<input type="checkbox" id="tm" />
					<div class="sidenav">
						<div class="allclassify">全部分类</div>
						<ul>
							<li><a href="#"><span>Tasks</span></a></li>
							<li><a href="#"><span>Messages</span></a></li>
							<li><a href="#"><span>New Post</span></a></li>
							<li><a href="#"><span>Settings</span></a></li>
							<li><a href="#"><span>Starred</span></a></li>
							<li><a href="#"><span>Logout</span></a></li>
						</ul>
					</div>
					<section>
            <!--导航-->
            <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">移动网站
              <x-icon slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;" ></x-icon>
              <label for="tm">sds</label>
              <div class="row" id="row">
                <div class="input-group col-xs-10 col-xs-offset-1">
                  <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search" style="color:#ea386d"></span></span>
                  <input type="text" class="form-control" placeholder="搜索" aria-describedby="basic-addon1">
                </div>
              </div>
            </x-header>
            <!-- 轮播 -->
            <swiper :list="demo03_list" auto style="width:100%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
            <!-- 主页条 -->
            <div class="line-one">
              <router-link to="/three"  @click.native="spanclick"><img src="../img/first1.jpg" alt=""></router-link>
              <marquee>
                  <marquee-item v-for="(item,index) in datashow" :key="index">{{item.name}}</marquee-item>
              </marquee>
            </div>
            <!-- 底部 -->
            <div class="bottom-self">
              <grid :show-lr-borders="false">
                <grid-item > 
                  <img slot="icon" src="../assets/img/addpeople_fill.png" width="30px;" style="cursor:pointer">
                  <span style="color:#877c7c;cursor:pointer;">个人中心</span>
                </grid-item>
                <grid-item> 
                  <img slot="icon" src="../assets/img/camera.png" width="30px;">
                  <span style="color:#877c7c;cursor:pointer;">视角生活</span>
                </grid-item>
                <grid-item> 
                  <img slot="icon" src="../assets/img/猜你喜欢.png" width="30px;">
                  <span style="color:#877c7c;cursor:pointer;">个人爱好</span>
                </grid-item>
                <grid-item> 
                  <img slot="icon" src="../assets/img/customerservice.png" width="30px;">
                  <span style="color:#877c7c;cursor:pointer;">我爱的音乐</span>
                </grid-item>
              </grid>
            </div>
					</section>
				</div>
			</div>
		</div>
	</div>
</template>
<i18n>
    News:
      zh-CN: 公告
    Grid:
      zh-CN: 九宫格
    Go to Cell:
      zh-CN: 跳转到Cell
    Custom content:
      zh-CN: 自定义内容
    Custom col:
       zh-CN: 自定义列
</i18n>
<script>
	//  $(function () {  
  //   alert(123);  
  // });  
import {XHeader,Swiper, GroupTitle, SwiperItem, XButton, Divider,Group,Cell,Marquee,MarqueeItem,Grid, GridItem} from 'vux'
import bus from '../assets/eventBus'
const imgList = [
  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=359202024,700731447&fm=27&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2205672215,4062513064&fm=27&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2993845588,4077596177&fm=15&gp=0.jpg',
  'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3401179005,3110473268&fm=27&gp=0.jpg',
  'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2459008071,932888850&fm=27&gp=0.jpg'
]
const demoList = imgList.map((one, index) => ({
  url: 'javascript:',
  img: one
}))
export default {
  components: {
    XHeader,
		Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
    Group,
    Cell,
    Marquee,
    MarqueeItem,
    Grid,
    GridItem
  },
  data () {
    return {
      msg: 'Hello World!',
      showMenus: false,
      demo03_list: demoList,
      datashow:[
        {name:'php是最好的语言'},
        {name:'java是最好的语言'},
        {name:'python是最好的语言'},
        {name:'asp.net是最好的语言'},
        {name:'c++是最好的语言'}
      ]
    }
  },
  methods:{
    slideClick(){
      this.$store.state.slideShow=true;
    },
    spanclick(){
      console.log('spanclick');
      bus.$emit('hanshu','this is message')
    }
  }
}
</script>

<style>
* {margin: 0; padding: 0;}
  .htmleaf-container{font-size: 0.16rem;position: relative;}
	#wrapper {width: 100vw; }
	.mobile {float: left; position: relative;overflow: hidden;}
	#tm {display: none;}
	.mobile section {background: url("../img/bg.jpg");width: 100vw; height: 100vh;position: relative; transition: all 0.25s;background-size: 100% 100%;}
	.mobile section label {border: 2px solid white; border-radius: 4px;display: block;position: absolute; left: 0%; top: 1px;cursor: pointer; text-transform: uppercase;
    width: 55px;height: 40px;opacity: 0;}
	.sidenav {background: #EEE;width: 100px;position: absolute; left: 0; top: 0; bottom: 0;	text-align: center;}
	.sidenav li {list-style-type: none;border-bottom: 1px solid #E1E1E1;height: 40px;line-height: 40px;}
	.sidenav a {color: #9B9B9B; text-decoration: none; }
	.sidenav span {display: block;opacity: 0; transform: translateX(50px); transition: all 0.4s;}
	#tm:checked ~ section {transform: translateX(100px);}
	#tm:checked ~ .sidenav span {opacity: 1; transform: translateX(0);}
	#tm:checked ~ .sidenav li:nth-child(1) span {transition-delay: 0.08s;}
	#tm:checked ~ .sidenav li:nth-child(2) span {transition-delay: 0.16s;}
	#tm:checked ~ .sidenav li:nth-child(3) span {transition-delay: 0.24s;}
	#tm:checked ~ .sidenav li:nth-child(4) span {transition-delay: 0.32s;}
	#tm:checked ~ .sidenav li:nth-child(5) span {transition-delay: 0.40s;} 
	#tm:checked ~ .sidenav li:nth-child(6) span {transition-delay: 0.48s;}
	.allclassify{height: 50px;line-height: 50px;text-align: center;border-bottom: 1px solid #E1E1E1;background-color: white;color: gray;}
  section	.vux-header{background-color: #FF0036;color: white; position: relative;}
	section .vux-header .vux-header-right a{color: white}
	/* / */
	.copyright {font-size: 12px;color: #ccc;text-align: center;}
.text-scroll {border: 1px solid #ddd;border-left: none;border-right: none;}
.text-scroll p{font-size: 12px;text-align: center;line-height: 30px;}
.black {background-color: #000;}
.title{line-height: 100px;text-align: center;color: #fff;}
.animated {animation-duration: 1s;animation-fill-mode: both;}
.vux-indicator.custom-bottom {bottom: 30px;}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {animation-name: fadeInUp;}
.swiper-demo-img img {width: 100%;}
section .vux-header{height: 77px;position: relative;}
#row{position: absolute;bottom: 3px;left: 20px;}
.line-one{height: 45px;line-height: 45px;background-color: white;position: relative}
.line-one .vux-marquee{position: absolute;right: -60%;top: 2px;}
/* 底部 */
.bottom-self{position: absolute;bottom: 0;width: 100%;}
.grid-center {display: block;text-align: center;color: #666;}
.weui-grids {background-color: #fff;}
.vux-grid-no-lr-borders a{text-align: center}
.vux-grid-no-lr-borders .weui-grid{padding: 8px;}
.weui-grid__icon:hover{cursor: pointer;}
</style>
